<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="particles">
        <div v-for="i in 20" :key="i" class="particle" :style="getParticleStyle(i)"></div>
      </div>
    </div>

    <!-- 居中登录卡片 -->
    <div class="login-card-centered">
      <div class="login-card">
        <!-- Logo标题 -->
        <div class="logo-header">
          <img src="http://127.0.0.1:8000/static/pecco_site/img/logo_pecco.svg" alt="PECCO Logo" class="logo-image" />
        </div>
        
        <!-- 标语 -->
        <div class="tagline-header">
          <p class="tagline-text">Happy Paws, Happy Days</p>
        </div>

        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          @submit.prevent="handleLogin"
          class="login-form"
        >
          <el-form-item prop="username">
            <div class="input-wrapper">
              <div class="input-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
                  <path d="M6 21C6 17.134 8.686 14 12 14C15.314 14 18 17.134 18 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
              </div>
              <el-input
                v-model="loginForm.username"
                placeholder="用户名"
                clearable
                size="large"
              />
            </div>
          </el-form-item>

          <el-form-item prop="password">
            <div class="input-wrapper">
              <div class="input-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="2"/>
                  <path d="M8 11V7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7V11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
              </div>
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="密码"
                show-password
                size="large"
                @keyup.enter="handleLogin"
              />
            </div>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              @click="handleLogin"
              class="login-button"
              size="large"
            >
              <span v-if="!loading">
                <span>登 录</span>
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>
        </el-form>

        <div class="login-footer">
          <p class="copyright">© 2025 PECCO. All rights reserved.</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { type FormInstance, type FormRules } from 'element-plus'
import { useAuthStore } from '@/store/auth'
import type { LoginRequest } from '@/types'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

const loginFormRef = ref<FormInstance>()
const loading = ref(false)

const loginForm = reactive<LoginRequest>({
  username: '',
  password: ''
})

const loginRules: FormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  if (!loginFormRef.value) return

  await loginFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        const success = await authStore.login(loginForm)
        if (success) {
          const redirect = route.query.redirect as string || '/'
          router.push(redirect)
        }
      } finally {
        loading.value = false
      }
    }
  })
}

// 生成粒子样式
const getParticleStyle = (index: number) => {
  const size = Math.random() * 4 + 2
  const left = Math.random() * 100
  const animationDuration = Math.random() * 20 + 10
  const animationDelay = Math.random() * 5
  
  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${left}%`,
    animationDuration: `${animationDuration}s`,
    animationDelay: `${animationDelay}s`
  }
}
</script>

<style scoped>
/* ========== 容器布局 ========== */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px 20px;
}

/* ========== 背景装饰 ========== */
.background-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  animation: float 20s infinite ease-in-out;
}

.shape-1 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
  top: -200px;
  left: -200px;
  animation-delay: 0s;
}

.shape-2 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
  bottom: -300px;
  right: -300px;
  animation-delay: 7s;
}

.shape-3 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 14s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(30px, -30px) rotate(120deg);
  }
  66% {
    transform: translate(-20px, 20px) rotate(240deg);
  }
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: rise linear infinite;
}

@keyframes rise {
  from {
    bottom: -10px;
    opacity: 1;
  }
  to {
    bottom: 110%;
    opacity: 0;
  }
}

/* ========== 居中登录卡片容器 ========== */
.login-card-centered {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  animation: fadeInScale 0.8s ease-out;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.login-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 50px 60px;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Logo标题区域 */
.logo-header {
  text-align: center;
  margin-bottom: 30px;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.logo-header .logo-image {
  width: 160px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(102, 126, 234, 0.3));
  transition: all 0.3s ease;
}

.logo-header .logo-image:hover {
  filter: drop-shadow(0 15px 40px rgba(102, 126, 234, 0.5));
  transform: scale(1.05);
}

/* 标语区域 */
.tagline-header {
  text-align: center;
  margin-bottom: 40px;
}

.tagline-text {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== 表单样式 ========== */
.login-form {
  margin-bottom: 32px;
}

.login-form :deep(.el-form-item) {
  margin-bottom: 24px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 16px;
  z-index: 1;
  width: 20px;
  height: 20px;
  color: #95a5a6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.input-icon svg {
  width: 100%;
  height: 100%;
}

.input-wrapper :deep(.el-input__wrapper) {
  padding-left: 48px;
  padding-right: 16px;
  height: 52px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
}

.input-wrapper :deep(.el-input__wrapper:hover) {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
}

.input-wrapper :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25);
  border-color: #667eea;
}

.input-wrapper :deep(.el-input__inner) {
  font-size: 15px;
  color: #2c3e50;
}

.input-wrapper :deep(.el-input__inner::placeholder) {
  color: #bdc3c7;
}

/* ========== 登录按钮 ========== */
.login-button {
  width: 100%;
  height: 52px;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
  transition: all 0.3s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.45);
}

.login-button:active {
  transform: translateY(0);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35);
}

.login-button span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.login-button svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.login-button:hover svg {
  transform: translateX(4px);
}

/* ========== 页脚 ========== */
.login-footer {
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid #ecf0f1;
}

.copyright {
  font-size: 13px;
  color: #95a5a6;
  margin: 0;
}

/* ========== 响应式设计 ========== */
@media (max-width: 600px) {
  .login-container {
    padding: 20px 15px;
  }
  
  .login-card-centered {
    max-width: 100%;
  }
  
  .login-card {
    padding: 40px 40px;
    border-radius: 20px;
  }
  
  .logo-header .logo-image {
    width: 120px;
  }
  
  .tagline-text {
    font-size: 16px;
  }
  
  .login-button {
    font-size: 15px;
  }
  
  .input-wrapper :deep(.el-input__wrapper) {
    height: 48px;
  }
}
</style>

